<template>
	<!--
    本页面模板教程：https://ext.dcloud.net.cn/plugin?id=2584
    uni-list 文档：https://ext.dcloud.net.cn/plugin?id=24
    uniCloud 文档：https://uniapp.dcloud.io/uniCloud/README
    unicloud-db 组件文档：https://uniapp.dcloud.io/uniCloud/unicloud-db
    DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema
    -->
	<view>
		<!-- 刷新页面后的顶部提示框 -->
		<view class="tips" :class="{ 'tips-ani': tipShow }">为您更新了10条动态</view>
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="formData"
			:collection="collection" :field="field" @load="load">
			<!-- 基于 uni-list 的页面布局 -->
			<uni-list>
				<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
				<uni-list-item direction="column" v-for="item in data" :key="item.id" showArrow :clickable="true"
					@click="handleItemClick(item._id)">
					<!-- 通过header插槽定义列表的标题 -->
					<template v-slot:header>
						<view class="uni-title">{{item.title}}</view>
					</template>
					<!-- 通过body插槽定义列表内容显示 -->
					<template v-slot:body>
						<view class="uni-list-box">
							<view class="uni-thumb" v-if="item.images!=null">
								<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
								<image :src="item.images[0].fileID" mode="aspectFill"></image>
							</view>
							<view class="uni-content">
								<view class="uni-title-sub uni-ellipsis-2">{{item.content}}</view>
								<view class="uni-note">{{ item.user_id[0].username }}
									{{ getDate(item.last_modify_date) }}</view>
							</view>
						</view>
					</template>
					<!-- 同步footer插槽定义列表底部的显示效果 -->
					<template v-slot:footer>
						<view class="footer">
							<view class="footer-tags">
								<text class="footer-tags-text"
									v-for="(item,index) in item.mall_category_id">{{item.text}}</text>
							</view>
							<view class="footer-category">
								<text
									:class="{'footer-category-text-blue': item.category_id[0].text == '谁有','footer-category-text-red': item.category_id[0].text == '我有'}">{{item.category_id[0].text}}</text>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
			<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
		</unicloud-db>
		<uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
	</view>
</template>

<script>
	import {
		convertTimestampToDate
	} from '../../utils/time.js';
	const db = uniCloud.database();
	export default {
		components: {},
		data() {
			return {
				// 数据表名
				collection: [
					db.collection('opendb-news-articles').field(
						'user_id,category_id,title,content,mall_category_id,images,mode,last_modify_date').getTemp(),
					db.collection('opendb-news-categories').field('name as text, _id').getTemp(),
					db.collection('opendb-mall-categories').field('name as text, _id').getTemp(),
					db.collection('uni-id-users').field('username,nickname, _id').getTemp()
				],
				// 查询字段，多个字段用 , 分割
				field: '_id,mode,category_id,mall_category_id,images,title,user_id,content,last_modify_date',
				formData: {
					status: 'loading' // 加载状态
				},
				tipShow: false // 是否显示顶部提示框
			};
		},
		watch() {},
		onLoad() {},
		methods: {
			load(data, ended) {
				if (ended) {
					this.formData.status = 'noMore';
				}
			},
			getDate(time) {
				return convertTimestampToDate(time);
			},
			handleItemClick(id) {
				uni.navigateTo({
					url: './detail?id=' + id
				});
			},
			fabClick() {
				// 打开新增页面
				uni.navigateTo({
					url: './add',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							this.$refs.udb.loadData({
								clear: true
							});
						}
					}
				});
			}
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.formData.status = 'more';
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				this.tipShow = true;
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.tipShow = false;
				}, 1000);
				uni.stopPullDownRefresh();
			});
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.$refs.udb.loadMore();
		}
	};
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.content {
		width: 100%;
		display: flex;
	}

	.list-picture {
		width: 100%;
		height: 145px;
	}

	.thumb-image {
		width: 100%;
		height: 100%;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.footer {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 10px;
	}

	.footer-tags {
		display: flex;
		flex-direction: row;
	}

	.footer-tags-text {
		color: red;
		border: 1px red solid;
		border-radius: 5px;
		padding: 1px 3px;
		margin-left: 5px;
		font-size: 25rpx;
	}

	.footer-category {
		.footer-category-text-blue {
			color: white;
			background-color: blue;
			padding: 1px 3px;
			border-radius: 3px;
			font-size: 25rpx;
			font-weight: bold;
		}

		.footer-category-text-red {
			color: white;
			background-color: red;
			padding: 1px 3px;
			border-radius: 3px;
			font-size: 25rpx;
			font-weight: bold;
		}
	}
</style>